<template>
	<view>
		<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"></camera>
		<image mode="widthFix" class="image" :src="photoPath" v-if="showImage"></image>
		<view class="operate-container">
			<button type="primary" class="btn" @tap="clickBtn" :disabled="!canCheckin">{{btnText}}</button>
			<button type="warn" class="btn" @tap="afresh" :disabled="!canCheckin">重拍</button>
		</view>
		<view class="notice-container">
			<text class="notice">注意事项</text>
			<text class="desc">拍照签到的时候，必须要拍摄自己的正面照片，侧面照片会导致无法识别。另外，拍照的时候不要戴墨镜或者帽子，避免影响拍照签到的准确度。</text>
		</view>
	</view>
</template>

<script>
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				canCheckin: true,
				photoPath: '',
				btnText: '拍照',
				showCamera: true,
				showImage: false
			}
		},
		onLoad:function(){
			qqmapsdk = new QQMapWX({
				key:"RBLBZ-ZI43M-HZ564-6NFGE-MLDM2-3DBTF"
			})
		},
		onShow:function(){
			let that = this
			that.ajax(that.url.validCanCheckIn,"GET",null,function(resp){
				let msg = resp.data.msg
				if(msg != "可以考勤"){
					that.canCheckin = false
					setTimeout(function(){
						uni.showToast({
							title:msg,
							icon:"none"
						},1000)
					})
				}
			})
		},
		methods: {
			clickBtn:function(){
				let that = this;
				if(that.btnText == '拍照'){
					let ctx = uni.createCameraContext();
					ctx.takePhoto({
						quality:"high",
						success:function(resp){
							console.log(resp.tempImagePath)
							that.photoPath = resp.tempImagePath;
							that.showCamera = false;
							that.showImage = true;
							that.btnText = "签到";
						},
					})
				}
				else{
					uni.getLocation({
						type:"wgs84",
						success:function(resp){
							let latitude = resp.latitude;
							let longitude = resp.longitude;
							console.log(latitude);
							console.log(longitude)
							qqmapsdk.reverseGeocoder({
								location:{
									latitude:latitude,
									longitude:longitude
								},
								success:function(resp){
									console.log(resp.result)
									let address = resp.result.address
									let addressComponent = resp.result.address_component
									let nation = addressComponent.nation;
									let province = addressComponent.province;
									let city = addressComponent.city;
									let district = addressComponent.district;
									uni.uploadFile({
										url: that.url.checkin, //上传的请求路径
										filePath: that.photoPath,// 要上传的文件路径，
										name:"photo",// 服务器端需要的文件字段名
										header:{
											token: uni.getStorageSync("token")
										},
										formData:{// 上传文件时携带的其它数据
											address:address,
											country:nation,
											province:province,
											city:city,
											district:district,
											latitude:latitude,
											longitude:longitude
										},
										success:function(resp){
											if(resp.statusCode == 200){
												let data = JSON.parse(resp.data)
												let code = data.code
												let msg = data.msg
												if(code == 200){
													uni.hideLoading()
													uni.showToast({
														icon:"none",
														title:"签到成功",
														complete:function(){
															uni.navigateTo({
																url:"../checkin_result/checkin_result"
															})
														}
													})
												}
											}
										},
										fail:function(e){
											console.log(e)
											uni.showToast({
												icon:"none",
												title:e.data
											})
										}
									})
								}
							})
						}
					})
				}
			},
			afresh:function(){
				let that = this;
				that.showCamera = true;
				that.showImage = false;
				that.btnText = "拍照";
			}
		}
	}
</script>

<style lang="less">
	@import url("checkin.less");
</style>
